<template>
    <a-card title="通行记录" :bordered="false">
        <!-- Card Header -->
        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-model-item>
                    <a-select allowClear v-model="searchForm.clientMac" placeholder="门禁终端"
                              style="width: 150px"
                    >
                        <a-select-option v-for=" (item,index) in ClientMacOPT" :key="index" :value="item.value">
                            {{item.label}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-item>
                    <a-input v-model="searchForm.staffCode" placeholder="人员编号"></a-input>
                </a-form-item>
				<a-form-item>
					<a-input v-model="searchForm.staffName" placeholder="人员姓名"></a-input>
				</a-form-item>
                <a-form-model-item>
                    <a-range-picker @change="rangeDateOnChange" />
                </a-form-model-item>
				<a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>
            </a-form>
        </template>
        <a-table bordered :columns="columns" :rowKey="record => record.id" :dataSource="dataSource"
                 :pagination="pagination" :loading="loading" @change="handleTableChange">
        </a-table>
    </a-card>
</template>
<script>
    import {pagination, recordTable} from '../public/colums.js';
    import {recordList, dictClientMac} from '../public/http.js';
    export default {
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
                pagination: {...pagination}, //复制预设的分页参数
                loading: false, //表格loading
                columns: recordTable, //表头管理
                searchForm: {
                    staffName: '',
                    staffCode: '',
                    clientMac: '',
                    beginDate:null,
                    endDate:null,
                },
                //场地字典选项列表
                ClientMacOPT: [], //门禁终端的MAC地址字典
            };
        },
        methods: {
            rangeDateOnChange(date, dateString) {
                this.searchForm.beginDate=dateString[0];
                this.searchForm.endDate=dateString[1];
            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                recordList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //数据初始化
            async init() {
                await dictClientMac().then(res => (this.ClientMacOPT = res));
                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>
